<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>SWFStore Advanced Example</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/event-delegate/event-delegate-min.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<script type="text/javascript" src="../../build/cookie/cookie-min.js"></script>
<script type="text/javascript" src="../../build/swf/swf-min.js"></script>
<script type="text/javascript" src="../../build/swfstore/swfstore-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

#controls label  
{
	clear: left;
	float: left;
	width: 10em; 
} 

#controls textarea  
{
	width: 24em; 
}

</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>SWFStore Advanced Example</h1>

<div class="exampleIntro">
	<p>This example shows how to get, set, and remove items from storage using the <a href="http://developer.yahoo.com/yui/swfstore/">YUI SWFStore Utility</a> and how to display stored data using a <a href="http://developer.yahoo.com/yui/datatable/">YUI DataTable</a>.</p>
<p>Note that in cases where Flash is missing on the user's machine, the content of the Flash container does not get overwritten, and since the container is sized down to 0, additional logic (not demonstrated in this example) would be necessary to inform the user that no Flash is installed.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->



<!--Placeholder for SWF, will be replaced with embedded SWF if proper Flash Player is installed-->
<div id="swfstoreContainer" style="width:0px;height:0px;">Unable to load Flash content. The YUI File SWFStore Control requires Flash Player 9.0.115 or higher. You can download the latest version of Flash Player from the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p></div>

<!--Input Controls-->

<div id="controls">
	<label for="valueField">Text to store:</label>
	<textarea cols="30" id="valueField" rows="5"></textarea>
	<br/>

	<label for="nameField">Storage name:</label>

	<input id="nameField" type="text" value=""/>
	<input id="save-button" name="save-button" type="Button" value="Save" /> <input id="remove-button" name="remove-button" type="Button" value="Remove" />

	<br/>
	<br/>
	<input id="purge-button" name="purge-button" type="Button" value="Purge All Local Data" />
	<input id="removeat-button" name="removeat-button" type="Button" value="Remove Item At:" /> <input id="indexField" type="text" value="0" size="3"/>

	<br/>
	<br/>

	<fieldset id="checkboxOptions">
        <legend>Additional Option:</legend>
		<input id="sharedata-button" name="sharedata-button" type="Button" value="Share Data"/>
		<input id="compression-button" name="compression-button" type="Button" value="Use Compression"/>
	</fieldset>

<br/>
<div id="datatableContainer" style="x:40" ></div>
</div>

<!--Local Scripts-->
<script type="text/javascript" >
	/**
	 * Pointer to the SWFStore instance
	 */
	var swfstore;

	/**
	 * Pointer to the DataTable instance
	 */
	var datatable;

	var saveButton;
	var purgeButton;
	var removeButton;
	var removeAtButton;
	var compressionCheckbox;
	var sharedataCheckbox;

	/**
	 * Initialization scripts
	 */
	 function initialize()
	 {
		var shareData = sharedataCheckbox.get("checked");
		var useCompression = compressionCheckbox.get("checked");

		saveButton.set("disabled", true);
		purgeButton.set("disabled", true);
		removeButton.set("disabled", true);
		removeAtButton.set("disabled", true);
		sharedataCheckbox.set("disabled", true);
		compressionCheckbox.set("disabled", true);

		//the swfstore instance
		swfstore = new YAHOO.util.SWFStore("swfstoreContainer", shareData, useCompression);

		//some basic listeners for user feedback
		swfstore.addListener("save", onSave);
		swfstore.addListener("error", onError);
		swfstore.addListener("quotaExceededError", onError);
		swfstore.addListener("securityError", onError);
		swfstore.addListener("contentReady", onContentReady);
	}

	/**
	 * Function to let us change the shareData property of the SWFStore
	 */
	 function changeShareData(event)
	 {
		swfstore.setShareData(event.newValue);
		resetDataTable();
	 }

	/**
	 * Function to let us change the useCompression property of the SWFStore
	 */
	 function changeUseCompression(event)
	 {
		swfstore.setUseCompression(event.newValue);
	 }

	/**
	 * This gets called once SWFStore is initialized and ready to be used.
	 * We disabled the buttons previously, so once they're usable we'll enable them here.
	 */
	function onContentReady(event)
	{
		saveButton.set("disabled", false);
		purgeButton.set("disabled", false);
		removeButton.set("disabled", false);
		removeAtButton.set("disabled", false);
		sharedataCheckbox.set("disabled", false);
		compressionCheckbox.set("disabled", false);
		load();
	}

	/**
	 * Clear out all data
	 */
	function purge()
	{
	 	swfstore.clear();
	}

	/**
	 * Called when a save is successful
	 */
	function onSave(event)
	{

		//added
		if(event.info == "add" || event.info == "update")
		{
			var newobj = {name: event.key, value: event.newValue};

			var len = datatable.getRecordSet().getLength();

			//loop through current records and see if this has been added before
			for (var i = 0; i < len; i++ )
			{
				var rec = datatable.getRecord(i);
				var data = rec.getData();

				//if it's been added already, update it
				if(data.name == event.key)
				{
					datatable.updateRow(i, newobj);
					return;
				}
			}

			//if it's not been added, add it
			datatable.addRow(newobj);
		}

		//removed
		else if(event.info == "delete")
		{
			//var index = parseInt(YAHOO.util.Dom.get('indexField').value);
			datatable.deleteRow(event.index);
		}

		//cleared
		else
		{
			datatable.deleteRows(0, datatable.getRecordSet().getLength());
		}
	}

	/**
	 * Called when something bad happens
	 */
	function onError(event)
	{
		YAHOO.log("Event " + event.message);
	}

	/**
	 * Gets the data from swfstore when the page loads
	 */
	function load()
	{
		//could use swfstore.getItems(), but that would not separate the data into fields
		var len = swfstore.getLength();

		var arr = [];

	    for (var i = 0; i < len; i++) {
			arr.push({ name:swfstore.getNameAt(i), value: swfstore.getValueAt(i) })
	    }

		var datasource = new YAHOO.util.LocalDataSource(arr);

		datasource.responseSchema = {fields : ["name", "value"]};

		var configs =
		{
			scrollable: true
		}

		var columns =
		[
			{key:"name", label:"Storage Name (Key)"},
			{key:"value", label:"Text Stored"}
		];

		datatable = new YAHOO.widget.DataTable("datatableContainer", columns, datasource, configs);
	}

	/**
	 * Resets DataTable views when "Share Data" is enabled or disabled.
	 */
	function resetDataTable() {
		var i, len = swfstore.getLength();

		if (datatable.getRecordSet().getLength() > 0) {
			datatable.deleteRows(0, datatable.getRecordSet().getLength());
		}

	    for (i = 0; i < len; i++) {
	    	datatable.addRow({name: swfstore.getNameAt(i), value: swfstore.getValueAt(i)});
	    }
	}

	/**
	 * Save the data locally
	 */
	function save()
	{
		swfstore.setItem(  YAHOO.util.Dom.get('nameField').value, YAHOO.util.Dom.get('valueField').value);
	}

	/**
	 * Remove an item from storage
	 */
	function remove()
	{
		var obj = YAHOO.util.Dom.get('nameField').value;
		swfstore.removeItem(obj);

	}

	/**
	 * Remove an item from storage at a certain location
	 */
	function removeItemAt()
	{
		var index = parseInt(YAHOO.util.Dom.get('indexField').value);
		swfstore.removeItemAt(index);

	}

/**
 * Called when the buttons are ready to be initialized
 */
	function onButtonsReady()
{

        saveButton = new YAHOO.widget.Button("save-button");
		purgeButton = new YAHOO.widget.Button("purge-button");
		removeButton = new YAHOO.widget.Button("remove-button");
		removeAtButton = new YAHOO.widget.Button("removeat-button");
		compressionCheckbox = new YAHOO.widget.Button("compression-button", {
	                                        type:"checkbox",
	                                        value:"0",
	                                        checked:false});
		sharedataCheckbox = new YAHOO.widget.Button("sharedata-button", {
	                                        type:"checkbox",
	                                        value:"0",
	                                        checked:false});

		saveButton.on("click", save);
		purgeButton.on("click", purge);
		removeButton.on("click", remove);
		removeAtButton.on("click", removeItemAt);
		compressionCheckbox.on("checkedChange", changeUseCompression);
		sharedataCheckbox.on("checkedChange", changeShareData);

		//initialize
		initialize();

		YAHOO.util.Dom.get('nameField').focus()
    }

    YAHOO.util.Event.onContentReady("controls", onButtonsReady);


</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
